<template>
  <van-nav-bar
    :left-arrow="TabShow ? false : true"
    title="购物车"
    fixed
    @click-left="onBack"
  />

  <div style="height: 46px"></div>

  <!-- 复选框组 -->
  <van-checkbox-group
    v-model="checkedArr"
    v-if="CartList.length > 0"
    ref="checkboxGroup"
  >
    <!-- 侧滑块 -->
    <van-swipe-cell v-for="item in CartList" :key="item.id">
      <!-- 商品卡片 -->
      <van-card
        :price="item.total"
        :title="item.product.name"
        class="goods-card"
      >
        <!-- 图片 -->
        <template #thumb>
          <van-checkbox :name="item.id" @click="onCheck"></van-checkbox>
          <img :src="item.product.cover_cdn" alt="" />
        </template>
        <!-- 数量 -->
        <template #num>
          <van-stepper
            v-model="item.pronum"
            @change="onChange(item.id, item.pronum)"
            theme="round"
            button-size="22"
            disable-input
          />
        </template>

        <!-- 描述 -->
        <template #desc>
          <span>商品单价：￥{{ item.price }}</span>
        </template>
      </van-card>
      <!-- 侧滑块 => 向左滑 -->
      <template #right>
        <van-button
          square
          text="删除"
          type="danger"
          @click="onDel(item.id)"
          class="delete-button"
        />
      </template>
    </van-swipe-cell>
  </van-checkbox-group>

  <van-empty v-else description="空空如也" />

  <div :class="TabShow ? 'height100' : 'height60'"></div>

  <van-submit-bar
    :class="TabShow ? 'cart' : ''"
    :price="total"
    button-text="提交订单"
    @submit="onSubmit"
  >
    <van-checkbox v-model="checked" @click="checkAll">全选</van-checkbox>
  </van-submit-bar>

  <Tab v-if="TabShow" />
</template>
<script>
import Tab from "components/common/Tab.vue";
import { showNotify } from "vant";
export default {
  components: {
    Tab,
  },
  created() {
    this.TabShow = this.$route.query.action == "cart" ? false : true;

    this.LoginAuth = this.$cookies.get("LoginAuth")
      ? this.$cookies.get("LoginAuth")
      : {};

    this.getCartData();
  },
  data() {
    return {
      TabShow: false,
      checkedArr: [],
      checked: false,
      LoginAuth: {},
      CartList: [],
    };
  },
  methods: {
    onBack() {
      this.$router.go(-1);
    },
    onSubmit() {
      // 把数组转成字符串
      let cartids = this.checkedArr.join(",");

      if (!cartids) {
        showNotify({
          type: "warning",
          message: "请选择结算的商品",
          duration: 1500,
        });

        return false;
      }

      this.$router.push({ path: "/order/cart/confirm", query: { cartids } });
    },
    async getCartData() {
      let data = {
        busid: this.LoginAuth.id,
      };

      let result = await this.$api.CartIndex(data);

      if (result.code === 1) {
        this.CartList = result.data;
      }
    },
    async onChange(cartid, pronum) {
      let data = {
        cartid,
        pronum,
      };

      let result = await this.$api.CartNumUpdate(data);

      if (result.code === 0) {
        showNotify({
          type: "warning",
          message: result.msg,
          duration: 1500,
        });

        // return false;
      }

      this.getCartData();
    },
    checkAll() {
      if (this.checkedArr.length == this.CartList.length) {
        this.$refs.checkboxGroup.toggleAll();
      } else {
        this.$refs.checkboxGroup.toggleAll(true);
      }
    },
    onCheck() {
      if (this.checkedArr.length == this.CartList.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    async onDel(cartid) {
      let data = {
        busid: this.LoginAuth.id,
        cartid,
      };

      let result = await this.$api.CartDel(data);

      if (result.code === 0) {
        showNotify({
          type: "warning",
          message: result.msg,
          duration: 1500,
        });

        return false;
      }

      this.getCartData();

      this.checkedArr = [];

      this.checked = false;
    },
  },
  computed: {
    total() {
      let total = 0;

      if (this.checkedArr.length == 0) {
        return total;
      }

      for (let item of this.CartList) {
        // includes => in_array
        if (this.checkedArr.includes(item.id)) {
          total += parseFloat(item.total);
        }
      }

      return total * 100;
    },
  },
};
</script>

<style>
.cart {
  bottom: 49px;
}

.height100 {
  height: 100px;
}

.height60 {
  height: 60px;
}

.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}

.van-card__thumb {
  display: flex;
  width: auto;
}

.van-card__thumb img {
  width: 88px;
  margin-left: 10px;
}
</style>